﻿@page "/"
@layout IndexLayout
@inject IMessageService _message
<PageTitle>主页</PageTitle>
<GridRow Class="EyeAni" Style="background-image:url('./Resources/MainBack.png');min-height:80vh;background-size:cover;position:relative;background-position:center;filter: brightness(10) blur(3px);" Align="middle" Justify="start">
    <GridCol Span="10" Offset="3">
        <Card Bordered="false" TitleTemplate="render" Style="width: 300px;border-radius:10px" Class="MainBorderRadius">
            <Body>
                <p>一个专为猫咪打造的休息站</p>
                <p>一个可以随便睡觉晒太阳的地方</p>
                <p>一个没有考核GPA的地方...</p>
            </Body>
        </Card>
    </GridCol>
    <div class="msgCont">
        <div clss="scrollRect" style="display: flex;flex-direction: column;align-items: flex-end;position: relative;">
            <div class="msgInfo">@msgs[(msgIndex)%msgs.Length]</div>
            <div class="msgInfo">@msgs[(msgIndex+1)%msgs.Length]</div>
            <div class="msgInfo">@msgs[(msgIndex+2)%msgs.Length]</div>
            <div style="width:80%;height:5px;background-color:#cbd2f857;overflow:hidden;position:relative;border-radius:2px">
                <div class="@classAnijdt" style="width:100%;height:100%;background-image:linear-gradient(to right, #f7abab , #bafff8);right:100%;position:absolute;"></div>
            </div>
        </div>
    </div>
</GridRow>
<div style="text-align:center">
    Day before yesterday I saw a rabbit, and yesterday a deer, and today you.

</div>
<Divider></Divider>
<div style="padding:10px 50px 0px 50px">
    <GridRow Justify="center">
        <div>
            <div style="text-align:center;margin-bottom: 0.5em;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    font-size: 38px;
    line-height: 1.23;">
                我前天见到了兔子,昨天是鹿。而今天,是你。
            </div>
            <Paragraph>
                猫猫休息站，是一个专门为了服务<Text Mark>猫咪</Text>各项活动所开设搭建的网站。它是建立于杨老师的作业上以及，华裕同学的灵感上，制作而成的网站。
            </Paragraph>
            <Paragraph>
                在使用之前，我们必须要说好！网站只供猫咪使用！
                如果您不是<Text Mark>猫咪或者猫科动物</Text>
                请立即离开！
                <Text Strong>否则，我们就只能喵喵喵了。</Text>
            </Paragraph>
            <Paragraph>
                o(≧口≦)o
            </Paragraph>
            <Title Level="2">简单的测试</Title>
            <Paragraph>
                为了使得网站是猫咪使用，所以我们需要检验您是否是猫咪或者猫科动物，点击下方按钮即可开始进行测试了。
            </Paragraph>
            <Paragraph>
                <Image Src="./Resources/CatLookAtYou.gif"></Image>
            </Paragraph>
            <Paragraph>
                I Am Looking At You！
                禁止使用自家猫咪，进行猫咪测试。
            </Paragraph>
            <Button Type="@ButtonType.Primary" style="width:200px" OnClick="btnClick">猫咪图灵测试</Button>
            <Title Level="2">网站使用指南</Title>
            <Paragraph>
                没有什么好说的，就一些基础的功能罢了。（划掉）主要是为了交学校的作业
            </Paragraph>
            <AntList Bordered DataSource="@(new Object[]{new object[]{"首页","你现在看到的就是首页了，这还需要说的吗？喵"},new object[]{"猫咪论坛","在这里，发布每天的行程生活状态。喵"},new object[]{"其他功能","自己去探索一下吧，啊哈。"}})">
                <Header>功能一览</Header>
                <ChildContent Context="item">
                    <ListItem>
                        <span>@(((Object[])item)[0])</span>@(((Object[])item)[1])
                    </ListItem>
                </ChildContent>

                <Footer>最后，祝您使用愉快。</Footer>
            </AntList>
        </div>
    </GridRow>
</div>
@code {
        RenderFragment render =@<div>
            <Text Strong>猫猫</Text>
            <Text Delete>摆烂</Text>
            <Text Strong>休息站！</Text>
            </div>;
        //进度条的动画
        string classAnijdt = "JZAni";
        string[] msgs = new string[] { "一切为了猫粮！", "啊，躺在阳光下真舒服啊", "好无聊，不像人类需要上学", "祈祷幸运的四叶草，出现！", "o((>ω< ))o" };
        UInt16 msgIndex { get; set; } = 0;
    public EventCallback<int> msgIndexChanged { get; set; }
    bool allowRender = false;
    void setValue(UInt16 index) {
        this.msgIndex = index;
    }
    async void autoMsgIndex(int sec) {
        while (true) {
            await Task.Delay(sec);
            classAnijdt = " ";
            StateHasChanged();
            await Task.Delay(200);
            msgIndex++;
            await msgIndexChanged.InvokeAsync(msgIndex);
            this.setValue(msgIndex);
            if (allowRender) {
                classAnijdt = "JZAni";
                StateHasChanged();
            }
            //异步渲染方法：https://zhuanlan.zhihu.com/p/361191079
            //https://blog.csdn.net/sD7O95O/article/details/124053779
        }
    }
    protected override void OnAfterRender(bool firstRender) {
        allowRender = true;
        base.OnAfterRender(firstRender);
    }
    protected override void OnInitialized() {
        this.autoMsgIndex(4000);
        base.OnInitialized();
    }

    void btnClick() {
        _message.Info("你是人类！喵！");
    }
}
    <style>
        .msgInfo {
            border-radius: 10px;
            /* height: 10px; */
            background-color: #bde5bdb0;
            padding: 10px;
            color: #8168ce;
            font-style: oblique;
            margin: 0 0 10px 0;
            display: inline-flex;
            word-wrap: inherit;
            /*width: max-content;*/
            max-width: 200px;
        }

        .msgCont {
            position: absolute;
            top: 10px;
            right: 10px;
            overflow: hidden;
            width: 200px;
            max-height: 170px;
        }

        .scrollRect {
            position: absolute;
            width: 200px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        /*整个背景眼镜的动画*/
        .EyeAni {
            animation-name: EyesLook;
            animation-duration: 4s;
            animation-fill-mode: forwards;
        }

        @@keyframes EyesLook {
            0% {
                filter: brightness(10) blur(3px);
            }

            80% {
                filter: brightness(1) blur(0px);
            }

            90% {
                filter: brightness(0.5) blur(0.7px);
            }

            100% {
                filter: brightness(1) blur(0px);
            }
        }
        /*加载进度条的动画*/
        .JZAni {
            animation-name: keyJZAni;
            animation-direction: normal;
            animation-duration: 4s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        @@keyframes keyJZAni {
            0% {
                right: 100%;
            }

            100% {
                right: 0%;
            }
        }
    </style>
